.h5-editor__header {
  height: var(--editor-header-height);
  background-color: var(--editor-header-bg);
  border-bottom: var(--editor-header-border);
  @apply flex items-center px-6;
  .header-divider {
    background-color: var(--editor-header-line-color);
    height: 18px;
  }
  .header-icons {
    font-size: var(--editor-header-icon-size);
    color: var(--editor-header-icon-color);
    color: var(--editor-header-icon-color);
    padding: var(--editor-header-icon-padding);
    border-radius: var(--editor-header-icon-radius);
    cursor: pointer;
    &.active {
      background-color: var(--editor-header-icon-active-bg);
    }
  }

  .header-zoom_slider {
    width: 119px;
    .ant-slider-step {
      height: var(--editor-header-zoom-slider-height);
      background: var(--editor-header-zoom-slider-bg);
    }

    .ant-slider-handle {
      width: var(--editor-header-zoom-slider-handle-size);
      height: var(--editor-header-zoom-slider-handle-size);
      background: var(--editor-header-zoom-slider-handle-bg);
      border-color: var(--editor-header-zoom-slider-handle-bg) !important;
      margin-top: -3px;
      &:focus {
        box-shadow: none !important;
      }
    }
  }
  .header-zoom_show {
    width: var(--editor-header-zoom-show-width);
    height: var(--editor-header-zoom-show-height);
    border: var(--editor-header-zoom-show-border);
    border-radius: var(--editor-header-zoom-show-radius);
    padding: 0;
    background-color: transparent;
    text-align: center;
    color: var(--editor-header-zoom-show-color);
  }
}
